<template>
  <div class="page_jinpinHelper">
    <van-sticky>
      <van-nav-bar
        title="近聘使用助手"
        @click-left="$router.push({path: '/mine'})"
      >
      <template #left >
          <van-icon
            v-show="helpIcon == 1" 
            name='arrow-left'
            size="20"
            @click="$router.push('/mine')"
          />
        </template>
        <template #right>
          <van-icon
            name='search'
            size="20"
            @click="$router.push('/searchHelper')"
            style="margin-right: 5px; font-size: 20px;"
          />
        </template>
      </van-nav-bar>
      <van-tabs v-model="activeTabs" color="#1989fa" v-if="menuArr.length" @change="onClickTabs">
        <van-tab v-for="(itemMenu, index) in menuArr" :title="itemMenu.text" :key="index" :name="itemMenu.value">
        </van-tab>
      </van-tabs>
      <van-dropdown-menu v-if="menu_leve2.length > 0 ">
        <van-dropdown-item
          v-model="value_level2"
          :options="[...[{ text: '全部（不限）', value: '-999' }], ...menu_leve2 ]"
          @change="(value)=> handleChangeDropdownItem_one(value, menu_leve2)"
        />
        <van-dropdown-item
          v-if="menu_leve3.length > 0"
          v-model="value_level3"
          :options="[...[{ text: '全部（不限）', value: '-999' }], ...menu_leve3]"
          @change="(value)=>handleChangeDropdownItem_two(value, menu_leve3)"
        />
        <van-dropdown-item
          v-if="menu_leve4.length > 0"
          v-model="value_level4"
          :options="[...[{ text: '全部（不限）', value: '-999' }], ...menu_leve4]"
          @change="(value)=>handleChangeDropdownItem_three(value, menu_leve4)"
        />
      </van-dropdown-menu>
    </van-sticky>

    <div class="project-info" v-if="videoList.length > 0">
      <div class="project-item" v-for="(item) in videoList">
        <div class="title">{{item.name}}</div>
        <div class="videoContainer" @click="handleVideoPath(item.url, 'jumpLink')" >
          <van-image class="videoImg" width="100%" :src="videoLogo" />
        </div>
        <div class="bottom">
          <div>
            <span style="font-weight: bold; font-size: 12px; margin-right: 2px;">近聘官方</span>
            <span style="color: #A894A6; ">发布</span>
          </div>
          <div>
            <van-button icon="share" size="mini" type="info" @click="handleVideoPath(item.url, 'share')">分享</van-button>
          </div>
        </div>
      </div>
    </div>

    <van-empty v-else description="暂无数据" />

  </div>
</template>

<script>
import comVideoPreview from "components/comVideoPreview";
import { Toast } from "vant";
import logoImg from '@/assets/logo.png';
import videoLogo from './videoLogo.jpg'

import {menuArr,
  demoVideoArr,
} from "./constantUtil";


export default {
  name: "jinpinHelper",
  components: {
    comVideoPreview,
  },

  data(){
    return {
      helpIcon:1,
      videoLogo,
      menuArr: [],
      searchBoxShow: false,

      activeTabs: '',
      params: {
        TypeKey: '',
        action: '',
      },

      videoList: [],
      value_level2: '-999',
      menu_leve2: [],
      value_level3: '-999',
      menu_leve3: [],
      value_level4: '-999',
      menu_leve4: [],

    }
  },

  mounted() {
    if(this.$route.query.helpIcon){
      this.helpIcon = this.$route.query.helpIcon
    }
    // this._toScaleSvcAndRestartMicro();  // 不同post接口的data传值处理方式
    this._getallsssistanttype_allMenu();
  },

  watch: {
    menuArr: {
      deep: true,
      handler(newVal, oldVal){
        // console.log('监听', newVal);
        this.menu_leve2 = newVal[0]?.children || [];
      }
    }
  },


  methods: {
    async _toScaleSvcAndRestartMicro(){
      const paramsObj = {
        "serverList": ""
      };
      const resp = await this.$api.others.scaleSvcAndRestartMicro(paramsObj);
      console.log('resp', resp);
    },

    async _getallsssistanttype_allMenu(){
      const resp = await this.$api.others.getallsssistanttype_allMenu();
      if(resp.code === 200){
        this.menuArr = resp?.data || [];
        if(resp.data && resp.data?.length){
          const keyId = resp?.data[0]?.value || '';

          // 更新activeTabs状态
          this.activeTabs = keyId;
          const newParams = {
            action: '',
            TypeKey: keyId
          }
          await this._getVideoList(newParams);
        }
      }
    },

    async _getVideoList(newParams={}){
      Object.assign(this.params, newParams);
      const resp = await this.$api.others.getassistantbytypekey(this.params);
      this.videoList = resp?.data || [];
    },



    onClickTabs(name, title){
      // console.log(name, title);
      // 每次点击, 将初始状态至为默认状态
      this.activeTabs = name;
      this.value_level2= '-999';
      this.menu_leve2= [];
      this.value_level3= '-999';
      this.menu_leve3= [];
      this.value_level4= '-999';

      // 将状态恢复至默认
      this.videoList = [];

      this.menu_leve2 = this.menuArr.find(eachItem => (eachItem.value === name))?.children || [];
      const newParams = {
        action: '',
        TypeKey: name,
      }
      this._getVideoList(newParams);
    },


    commonUtils(value, parentId){
      if (value === '-999'){
        const newParams = {
          action: '-999',
          TypeKey: parentId,
        }
        this._getVideoList(newParams);
      } else {
        const newParams = {
          action: '',
          TypeKey: value,
        }
        this._getVideoList(newParams)
      }
    },

    handleChangeDropdownItem_one: function(value, menu_leve2=[]){
      // 状态置空
      this.videoList = [];
      this.menu_leve4 = [];
      this.value_level4='-999';
      this.value_level3='-999';
      this.menu_leve3 = menu_leve2.find(eachItem => (eachItem.value === value))?.children || [];
      this.commonUtils(value, this.activeTabs);
    },

    handleChangeDropdownItem_two(value, menu_leve3=[]){
      // console.log('value--222', value, menu_leve3);
      this.videoList = [];
      this.value_level4 = '-999';
      this.menu_leve4 = menu_leve3.find(eachItem => (eachItem.value === value))?.children || [];

      this.commonUtils(value, this.value_level2);

    },

    handleChangeDropdownItem_three(value){
      this.videoList = [];
      // console.log('value--333', value);
      this.commonUtils(value, this.value_level3);
    },


    handleVideoPath(url, keyName){
      // 跳转至外部链接
      if(keyName === 'jumpLink'){
        window.open(url, '_blank')
      }

      // 分享
      if (keyName === 'share'){
        this.$copyText(url).then(
          function(e) {
            Toast('复制成功, 将视频地址粘贴分享给其他人即可')
          },
          function(e) {
            Toast('复制出错')
          }
        )
      }

      if (keyName === 'download'){
        console.log('下载');
        window.open(url, '_blank')
      };

    },
  },


};
</script>

<style lang="scss" scoped>
.page_jinpinHelper{
  width: 100%;
  box-sizing: border-box;
  .project-info{
    .project-item{
      margin-top: 10px;
      background-color: #FFFFFF;
      padding: 3px 10px 10px 10px;
      border-bottom: 1px solid #dddddd;
      text-align: center;
      .title{
        font-size: 13.6px;
        font-weight: bold;
        line-height: 1.666;
        text-align: justify;
      }
      .videoContainer{
        background-color: #eee;
        .videoImg{
          vertical-align: bottom;
        }
      }
      .bottom{
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
</style>
